<template>
    <el-form ref="userForm" :rules="rules" :model="userInfo" label-width="120px"
        style="margin-left: 120px; margin-top: 30px">
        <el-form-item label="姓名:" prop="username">
            <el-input v-model="userInfo.username" style="width:300px" />
        </el-form-item>
        <el-form-item label="密码:" prop="password">
            <el-input v-model="userInfo.password" type="password" style="width:300px" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="hUpdate">更新</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { updateEmployee } from '@/api/employees';
import { getUserDetailById } from '@/api/user';

export default {
    data() {
        return {
            userInfo: {
                username: '',
                password: ''
            },
            rules: {
                username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
                password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
            }
        }
    },
    created() {
        this.loadUserDetail()
    },
    methods: {

        async loadUserDetail() {
            try {

                const res = await getUserDetailById(this.$route.params.id)
                console.log(res);
                this.userInfo = res.data

            } catch (e) {
                console.log(e);
            }
        },
        async hUpdate() {
            const valid = await this.$refs.userForm.validate().catch(e => e)
            if (!valid) return
            const res = await updateEmployee(this.userInfo).catch(e => this.$message.error(e.message))
            this.$message.success(res.message)
            console.log(res);
        }
    }
}
</script>

<style scoped lang='less'></style>